<template>
    <div>
        <web-header show="islands" />

        <div class="index_b">
            <aside>
                <dl>
                    <dt>东南亚海岛</dt>
                    <dd>
                        <router-link target="_blank" to="/line/91">
                            <span class="post-re">巴厘岛
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/92">
                            <span class="post-re">沙巴岛
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/93">
                            <span class="post-re">普吉岛
                                <span class="hot-tip iconfont icon-hot-tip"></span>
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/94">
                            <span class="post-re">长滩岛
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/95">
                            <span class="post-re">苏梅岛
                                <span class="hot-tip iconfont icon-hot-tip"></span>
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/100">
                            <span class="post-re">冲绳
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/101">
                            <span class="post-re">济州岛
                                <span class="hot-tip iconfont icon-hot-tip"></span>
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/299">
                            <span class="post-re">甲米岛
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/300">
                            <span class="post-re">美娜多
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/506">
                            <span class="post-re">仙本那
                                <span class="hot-tip iconfont icon-hot-tip"></span>
                            </span>
                        </router-link>
                    </dd>
                </dl>
                <dl>
                    <dt>大洋洲海岛</dt>
                    <dd>
                        <router-link target="_blank" to="/line/41">
                            <span class="post-re">夏威夷
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/104">
                            <span class="post-re">斐济
                                <span class="hot-tip iconfont icon-hot-tip"></span>
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/105">
                            <span class="post-re">大溪地
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/176">
                            <span class="post-re">塞班岛
                                <span class="hot-tip iconfont icon-hot-tip"></span>
                            </span>
                        </router-link>
                    </dd>
                </dl>
                <!-- <dl>
        <dt>欧洲海岛</dt>
        <dd>
            对象列表中没有明确标记为欧洲的地区，所以这个部分暂无内容
        </dd>
    </dl> -->
                <dl>
                    <dt>中东非海岛</dt>
                    <dd>
                        <router-link target="_blank" to="/line/177">
                            <span class="post-re">斯里兰卡
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/198">
                            <span class="post-re">塞舌尔
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/199">
                            <span class="post-re">民丹岛
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/200">
                            <span class="post-re">兰卡威
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/246">
                            <span class="post-re">马尔代夫
                                <span class="hot-tip iconfont icon-hot-tip"></span>
                            </span>
                        </router-link>
                        <router-link target="_blank" to="/line/346">
                            <span class="post-re">留尼汪岛
                                <!-- <span class="hot-tip iconfont icon-hot-tip"></span> -->
                            </span>
                        </router-link>
                    </dd>
                </dl>
            </aside>
            
            <div class="right">
                <ul>
                    <li class="island-shadow"><router-link to="/line/91/" target="_blank">
                            <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/islands/bl.jpg"
                                style="display: inline;">
                        </router-link>
                        巴厘岛</li>

                    <li class="island-shadow"><router-link to="/line/93/" target="_blank">
                            <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/islands/pj.jpg"
                                style="display: inline;">
                        </router-link>
                        普吉岛</li>

                    <li class="island-shadow"><router-link to="/line/92/" target="_blank">
                            <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/islands/sb.jpg"
                                style="display: inline;">
                        </router-link>
                        沙巴</li>

                    <li class="island-shadow"><router-link to="/line/104/" target="_blank">
                            <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/islands/fj.jpg"
                                style="display: inline;">
                        </router-link>
                        斐济</li>

                    <li class="island-shadow"><router-link to="/line/177/" target="_blank">
                            <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/islands/slnk.jpg"
                                style="display: inline;">
                        </router-link>
                        斯里兰卡</li>

                    <li class="island-shadow"><router-link to="/line/108/" target="_blank">
                            <img src="https://admin.hqx.com.cn/Public/App/image/islands-su.jpg" style="display: inline;">
                        </router-link>
                        苏梅岛</li>

                    <li class="island-shadow"><router-link to="/line/87/" target="_blank">
                            <img src="https://admin.hqx.com.cn/Public/App/image/islands-m.jpg" style="display: inline;">
                        </router-link>
                        马尔代夫</li>
                    <li class="island-shadow"><router-link to="/line/87/" target="_blank">
                            <img src="https://admin.hqx.com.cn/Public/App/image/islands8.jpg" style="display: inline;">
                        </router-link>
                        塞班</li>
                </ul>
            </div>
        </div>

        <div class="box_a center_c">
            <div class="top">
                <aside style="float:right">
                    <dl>
                        <dt>
                            <router-link to="#" target="_blank">东南亚海岛</router-link>
                        </dt>
                        <dd>拥抱热带天堂，东南亚海岛以其碧绿海水、白色沙滩和丰富的文化而闻名。探索泰国普吉岛的热带雨林，潜入马来西亚仙本那的海底世界，或是在印尼巴厘岛的沙滩上享受阳光。</dd>
                    </dl>

                    <div class="foreign-citys">
                        <router-link to="/line/89">
                            <div class="foreign-city-item">
                                <div class="foreign-city-item-title">巴厘岛</div>
                                <div class="English-name">Bali</div>
                            </div>
                        </router-link>
                        <div class="foreign-city-item">
                            <router-link to="/line/101">
                                <div class="foreign-city-item-title">济州岛</div>
                                <div class="English-name">Bali</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/92">
                                <div class="foreign-city-item-title">沙巴岛</div>
                                <div class="English-name">Sabah</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/93">
                                <div class="foreign-city-item-title">普吉岛</div>
                                <div class="English-name">Phuket</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/94">
                                <div class="foreign-city-item-title">长滩岛</div>
                                <div class="English-name">Boracay</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/95">
                                <div class="foreign-city-item-title">苏梅岛</div>
                                <div class="English-name">Koh Samui</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/299">
                                <div class="foreign-city-item-title">甲米岛</div>
                                <div class="English-name">Krabi</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/300">
                                <div class="foreign-city-item-title">美娜多</div>
                                <div class="English-name">Manado</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/506">
                                <div class="foreign-city-item-title">仙本那</div>
                                <div class="English-name">Semporna</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/100">
                                <div class="foreign-city-item-title">冲绳</div>
                                <div class="English-name">Bali</div>
                            </router-link>
                        </div>
                    </div>
                </aside>

                <div class="pic" style=" float:left">
                    <router-link to="/line/323/" target="_blank">
                        <img src="https://admin.hqx.com.cn/Public/Home/images/island/4.jpg">
                    </router-link>
                </div>
            </div>
            <div class="bottom">
                <div class="list df">
                    <section v-for="rs in southeastAsia" :key="rs.id">
                        <CustomCard width="276" height="250" imgHeight="160" direction="right"
                            :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id">
                        </CustomCard>
                        <!-- <div class="box">
                            <div class="pic">
                                <router-link target="_blank" :to="`/details/${rs.id}`">
                                    <img :src="rs.picture || rs.pic">
                                </router-link>
                            </div>
                            <h3>
                                <router-link target="_blank" :to="`/details/${rs.id}`" class="clamp-line-1">{{ rs.title }}</router-link>
                            </h3>
                            <dl>
                                <dt>
                                    <strong>￥{{ rs.price }}</strong>
                                </dt>
                                <dd>销量：{{ rs.clicks }}件</dd>
                            </dl>
                        </div> -->
                    </section>
                </div>
            </div>
            <!-- <div class="types">
                <dl>
                    <dt>东南亚海岛</dt>
                    <dd>
                    <dd>
                        <router-link target="_blank" to="/line/91/">巴厘岛</router-link>
                        <router-link target="_blank" to="/line/93/">普吉岛</router-link>
                        <router-link target="_blank" to="/line/92/">沙巴岛</router-link>
                        <router-link target="_blank" to="/line/94/">长滩岛</router-link>
                        <router-link target="_blank" to="/line/95/">苏梅岛</router-link>
                        <router-link target="_blank" to="/line/96/">帕劳</router-link>
                        <router-link target="_blank" to="/line/100/">冲绳</router-link>
                        <router-link target="_blank" to="/line/199/">民丹岛</router-link>
                        <router-link target="_blank" to="/line/200/">兰卡威</router-link>
                        <router-link target="_blank" to="/line/177/">斯里兰卡</router-link>
                        <router-link target="_blank" to="/line/246/">马尔代夫</router-link>
                    </dd>
                    </dd>
                </dl>
            </div> -->
        </div>



        <div class="box_a center_c">
            <div class="top">
                <aside>
                    <dl>
                        <dt>
                            <router-link target="_blank" to="#">大洋洲海岛</router-link>
                        </dt>
                        <dd>大洋洲海岛是冒险和自然的完美结合。在夏威夷的火山和沙滩间寻找平衡，潜入大溪地的水晶般清澈的海水，或是在斐济的岛屿中寻找属于自己的天堂。</dd>
                    </dl>

                    <div class="foreign-citys" style="margin-top: 12px;">
                        <div class="foreign-city-item">
                            <router-link to="/line/41">
                                <div class="foreign-city-item-title">夏威夷</div>
                                <div class="English-name">Hawaii</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/100">
                                <div class="foreign-city-item-title">冲绳</div>
                                <div class="English-name">Okinawa</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/101">
                                <div class="foreign-city-item-title">济州岛</div>
                                <div class="English-name">Jeju</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/104">
                                <div class="foreign-city-item-title">斐济</div>
                                <div class="English-name">Fiji</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/105">
                                <div class="foreign-city-item-title">大溪地</div>
                                <div class="English-name">Tahiti</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/176">
                                <div class="foreign-city-item-title">塞班岛</div>
                                <div class="English-name">Saipan</div>
                            </router-link>
                        </div>
                    </div>

                </aside>
                <div class="pic">
                    <router-link target="_blank" to="/line/317/">
                        <img src="https://admin.hqx.com.cn/Public/Home/images/island/2.jpg">
                    </router-link>
                </div>
            </div>

            <div class="bottom">
                <div class="list df">
                    <section v-for="rs in australia" :key="rs.id">
                        <CustomCard width="276" height="250" imgHeight="160" direction="right"
                            :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id">
                        </CustomCard>
                        <!-- <section v-for="rs in australia" :key="rs.id">
                        <div class="box">
                            <div class="pic">
                                <router-link target="_blank" :to="`/details/${rs.id}`">
                                    <img :src="rs.picture || rs.pic">
                                </router-link>
                            </div>
                            <h3>
                                <router-link target="_blank" :to="`/details/${rs.id}`" class="clamp-line-1">{{ rs.title }}</router-link>
                            </h3>
                            <dl>
                                <dt>
                                    <strong>￥{{ rs.price }}</strong>
                                </dt>
                                <dd>销量：{{ rs.clicks }}件</dd>
                            </dl>
                        </div> -->
                    </section>
                </div>
            </div>
            <!-- <div class="types">
                <dl>
                    <dt>澳洲海岛</dt>
                    <dd>
                        <router-link target="_blank" to="/line/104/">斐济</router-link>
                        <router-link target="_blank" to="/line/105/">大溪地</router-link>
                    </dd>
                </dl>
            </div> -->
        </div>



        <div class="box_a center_c">
            <div class="top">
                <aside style="float:right;">
                    <dl>
                        <dt><router-link target="_blank" to="#">中东非海岛</router-link>
                        </dt>
                        <dd>中东非海岛提供了一个逃离现实的梦幻之地。在马尔代夫的水上别墅中放松身心，探索塞舌尔的原始海滩，或是在马达加斯加的野生自然中徒步旅行。</dd>
                    </dl>

                    <div class="foreign-citys" style="margin-top: 12px;">
                        <div class="foreign-city-item">
                            <router-link to="/line/177">
                                <div class="foreign-city-item-title">斯里兰卡</div>
                                <div class="English-name">Sri Lanka</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/198">
                                <div class="foreign-city-item-title">塞舌尔</div>
                                <div class="English-name">Seychelles</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/199">
                                <div class="foreign-city-item-title">民丹岛</div>
                                <div class="English-name">Bintan</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/200">
                                <div class="foreign-city-item-title">兰卡威</div>
                                <div class="English-name">Langkawi</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/246">
                                <div class="foreign-city-item-title">马尔代夫</div>
                                <div class="English-name">Maldives</div>
                            </router-link>
                        </div>
                        <div class="foreign-city-item">
                            <router-link to="/line/346">
                                <div class="foreign-city-item-title">留尼汪岛</div>
                                <div class="English-name">Reunion</div>
                            </router-link>
                        </div>
                    </div>
                </aside>
                <div class="pic" style="float:left;">
                    <router-link target="_blank" to="/line/85/"><img
                            src="https://admin.hqx.com.cn/Public/Home/images/island/6.jpg"></router-link>

                </div>
            </div>

            <div class="bottom">
                <div class="list df">
                    <section v-for="rs in africa" :key="rs.id">
                        <CustomCard width="276" height="250" imgHeight="160" direction="right"
                            :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id">
                        </CustomCard>
                        <!-- <section v-for="rs in africa" :key="rs.id">
                        <div class="box">
                            <div class="pic">
                                <router-link target="_blank" :to="`/details/${rs.id}`">
                                    <img :src="rs.picture || rs.pic">
                                </router-link>
                            </div>
                            <h3>
                                <router-link target="_blank" :to="`/details/${rs.id}`" class="clamp-line-1">{{ rs.title }}</router-link>
                            </h3>
                            <dl>
                                <dt>
                                    <strong>￥{{ rs.price }}</strong>
                                </dt>
                                <dd>销量：{{ rs.clicks }}件</dd>
                            </dl>
                        </div> -->
                    </section>
                </div>
            </div>

            <!-- <div class="types">
                <dl>
                    <dt>中东非海岛</dt>
                    <dd>
                        <router-link target="_blank" to="/line/197/">马达加斯加</router-link>
                        <router-link target="_blank" to="/line/109/">毛里求斯</router-link>
                        <router-link target="_blank" to="/line/198/">塞舌尔</router-link>
                    </dd>
                </dl>
            </div> -->
        </div>

        <!-- <div class="box_a center_c">
            <div class="top">
                <aside>
                    <dl>
                        <dt><router-link target="_blank" to="#">欧美海岛</router-link>
                        </dt>
                        <dd>外国海岛有充沛的光照、细白的海滩、碧蓝的海水、神秘的礁湖和茂密的林木,如果你还在犹豫去哪,不如就选个海岛放松一下吧</dd>
                    </dl>
                </aside>

                <div class="pic">
                    <router-link target="_blank" to="line/636/"><img
                            src="https://admin.hqx.com.cn/Public/Home/images/island/3.jpg"></router-link>

                </div>
            </div>

            <div class="bottom">
                <div class="list">
                    <section v-for="rs in europe" :key="rs.id">
                        <div class="box">
                            <div class="pic">
                                <router-link target="_blank" :to="`/details/${rs.id}`">
                                    <img :src="rs.picture || rs.pic">
                                </router-link>
                            </div>
                            <h3>
                                <router-link target="_blank" :to="`/details/${rs.id}`" class="clamp-line-1">{{ rs.title }}</router-link> 
                            </h3>
                            <dl>
                                <dt>
                                    <strong>￥{{ rs.price }}</strong>
                                </dt>
                                <dd>销量：{{ rs.clicks }}件</dd>
                            </dl>
                        </div>
                    </section>
                </div>
            </div>
        </div> -->
        <web-footer />
        <back-top />
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue"
import { index_banner, line_items, theme_items, destination_area } from "@/api/travel";
import CustomCard from "@/components/card/CustomCard.vue";

// line_items 简化
let getItem = async (ids, limit = 10) => {
    let res = await line_items({
        ids,
        limit
    });
    return res.data;
};

let getItemArea = async (area, limit = 4) => {
    let res = await line_items({
        area,
        limit
    });
    return res.data;
}; 
let getItemDes = async (des, limit = 4) => {
    let res = await line_items({
        des,
        limit
    });
    return res.data;
};



// 东南亚海岛
let southeastAsia = ref([]);
let getSoutheastAsia = async () => {
    let data = await getItem("7909,7903,7930,7793");
    southeastAsia.value = data;
};
// 大洋洲海岛
let australia = ref([]);
let getAustralia = async () => {
    let data = await getItem("7229,7222,5577,7272");
    australia.value = data;
};
// 中东非海岛
let africa = ref([]);
let getAfrica = async () => {
    let data = await getItem("7950,6260,7745,6657");
    africa.value = data;
};
// 欧美海岛
// let europe = ref([]);
// let getEurope = async () => {
//     let data = await getItem("9");
//     europe.value = data;
// };





onMounted(async () => {
    getSoutheastAsia();
    getAustralia();
    getAfrica();
    // getEurope();
});

</script>

<style lang="scss" scoped>
@import "../../css/main_islands.css";
</style>
